<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智慧商城</title>

    <link rel="stylesheet" href="./css/swiper/swiper.min.css" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/lunbo.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <style>
      @keyframes run {
        from {
          transform: translateX(90.6667vw);
        }
        to {
          transform: translateX(-100%);
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 头部 -->
      <header>
        <div class="title">
          <p>{{title}}</p>
        </div>
      </header>
      <!-- 主体 -->
      <div class="main">
        <!-- 搜索框 -->
        <div class="search">
          <a href="./search.html">
            <!-- <input type="search" /> -->
            <i class="iconfont icon-sousuo"></i>
            <p>{{search}}</p>
          </a>
        </div>

        <!-- 轮播图 -->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item,index) in banner"
              :key="index"
            >
              <img :src="item.imgUrl" alt="" />
            </div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
        </div>
        <!-- 通告 -->
        <div class="info">
          <a href="#">
            <div class="word">
              <i class="iconfont icon-laba"></i>
            </div>
            <div class="scroll">
              <div class="run">
                <div class="text">{{info}}</div>
              </div>
            </div>
          </a>
        </div>

        <!-- 内容 -->
        <div class="content">
          <a href="#" v-for="(item,index) in navBar" :key="index">
            <span>
              <img :src="item.imgUrl" alt="" />
            </span>
            <p>新品首发</p>
          </a>
        </div>

        <!-- 广告 -->
        <div class="ad">
          <a href="javascript:void(0);" v-for="item in ad">
            <img :src="item.imgUrl" alt="" />
          </a>
        </div>

        <!-- list -->
        <div class="list">
          <div class="title" v-html="txt"></div>
          <div class="list_con">
            <div
              class="item"
              v-for="(item,index) in goods"
              @click.prevent="log(item.goods_id)"
              :key="item.goods_id"
            >
              <div class="pic">
                <a href="#">
                  <img :src="item.goods_image" alt="" />
                </a>
              </div>
              <div class="txt">
                <div class="goods_name ellipsis-2">{{item.goods_name}}</div>
                <div class="bottom">
                  <p>已售{{item.goods_sales}}件</p>
                  <div class="footer">
                    <!-- 现价 -->
                    <div class="price_x">¥{{item.goods_price_min}}</div>
                    <!-- 原价 -->
                    <div class="price_y" v-if="item.line_price_max>0">
                      ¥{{item.line_price_max}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部 -->
      <footer>
        <a href="./index 1.html" class="active link1">
          <i class="iconfont icon-shouye-zhihui"></i>
          <p>首页</p>
        </a>
        <a href="./classify.html" class="link2">
          <i class="iconfont icon-fenlei"></i>
          <p>分类</p>
        </a>
        <a href="./shop.html" class="link3">
          <i class="iconfont icon-31gouwuche"></i>
          <p>购物车</p>
        </a>
        <a href="./my.html" class="link4">
          <i class="iconfont icon-wode"></i>
          <p>我的</p>
        </a>
      </footer>
    </div>
    <script src="./js/swiper/swiper.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/common.js"></script>
    <script src="./vue-js/index.js"></script>
  </body>
</html>
